<!-- 表格数据 -->
<template>
  <div id="myChart"></div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
]);
export default {
  data() {
    return {};
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let data = await this.$store.dispatch("personCenter/get_All");
      this.drawLine(data);
    },
    drawLine(data) {
      const {
        cooperation_applies,
        cooperation_applies_pending,
        jobs,
        plates,
        posts,
        topic_posts,
        users,
      } = data;
      var myChart = echarts.init(document.getElementById("myChart"));
      var option = {
        title: {
          text: "Running Job",
          left: "center",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: [
            "平台职位",
            "论坛发言",
            "论坛主题",
            "论坛板块",
            "申请审核中",
            "商家入驻",
            "系统用户",
          ],
        },
        series: [
          {
            name: "系统数据",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [
              jobs,
              posts,
              topic_posts,
              plates,
              cooperation_applies_pending,
              cooperation_applies,
              users,
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang='scss' scoped>
#myChart {
  margin: 50px 0;
  width: 100%;
  height: 500px;
}
</style>
